package com.nicolasprof.profgallery.navigation {
	import flash.geom.Rectangle;
	import flash.events.MouseEvent;
	import gs.easing.Sine;
	import gs.TweenLite;
	import com.nicolasprof.profgallery.assets.TextBackground;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.DropShadowFilter;
	import flash.net.URLRequest;
	import flash.text.TextField;

	/**
	 * @author Nicolas Prof
	 */
	public class Node extends Sprite {

		protected var _imageHolder : Sprite;
		protected var _isMultiSection : Boolean;
		protected var _level : int;
		protected var _data : XML;

		
		public function Node($data: XML, $level: int) {
			var title : TextField = this.getChildByName("tfTitle") as TextField;
			var desc : TextField = this.getChildByName("tfDesc") as TextField;
			var shadow : DropShadowFilter = new DropShadowFilter(0,45,0,1,4,4,1,3);
			_imageHolder = this.getChildByName("imageHolder") as Sprite;
			_level = $level;
			_data = $data;
			
			_isMultiSection = this.getTag($data, "menu");
			
			if(title != null) {
				title.filters = [shadow];
				title.text = $data.title;
				//addBackground(title); //You can also try with backgrounds
			}
			if(desc != null){
				desc.filters = [shadow];
				desc.text = $data.desc;
				//addBackground(desc);
			}
			if(_imageHolder != null && $data.@img != ""){
				var request: URLRequest = new URLRequest(String($data.@img));
				var loader: Loader = new Loader();
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete, false, 0, true);
				loader.load(request);
			}
			
			this.buttonMode = true;
			this.tabEnabled = false;
			this.mouseChildren = false;
		}	
		protected function addBackground($textField : TextField) : void {
			var bg: TextBackground = new TextBackground();
			
			this.addChildAt(bg, this.getChildIndex($textField));
			
			bg.x = $textField.x;
			bg.y = $textField.y;
			bg.width = $textField.width;
			bg.height = $textField.height;
		}
		protected function animateIn() : void {
			var mask : Rectangle = new Rectangle(0, 0, 0, _imageHolder.height);
			updateMask();
			TweenLite.to(mask, 1, {width:_imageHolder.width, ease: Sine.easeInOut, onUpdate:updateMask});
			function updateMask () : void {
				_imageHolder.scrollRect = mask;
			}
		}
		protected function getTag(xml : XML, tagName : String) : Boolean {	
			return (xml.descendants(tagName).length() != 0);
		}	
		protected function toggle($state : Boolean) : void {
			TweenLite.to(_imageHolder, 0.5, {colorMatrixFilter:{saturation:int($state)}, ease: Sine.easeInOut});
		}
		/**
		 * Events
		 */
		protected function onComplete(e : Event) : void {
			_imageHolder.addChild(e.currentTarget.content);
			//animateIn(); //Effect suxx. but if you want you can try
			this.toggle(false);
			
			this.addEventListener(MouseEvent.MOUSE_OVER, onOver, false, 0, true);
			this.addEventListener(MouseEvent.MOUSE_OUT, onOut, false, 0, true);
		}
		private function onOver(e : MouseEvent) : void {
			this.toggle(true);
		}
		private function onOut(e : MouseEvent) : void {
			this.toggle(false);
		}

		/**
		 * Getters
		 */
		public function get data() : XML {
			return _data;
		}		
		public function get level() : int {
			return _level;
		}
		public function get multiSection() : Boolean {
			return _isMultiSection;
		}
	}
}
